<template>
	<view class="view">
		<view class="desc">
			{{ data.desc }}
		</view>
		<view class="device u-flex u-flex-y-center">
			<view class="label">告警来源:</view>
			<view class="txt">{{ data.device }}</view>
		</view>
		<view class="info-item u-flex u-flex-y-center">
			<view class="label">告警级别:</view>
			<view class="txt">
				<u-tag text="普通" type="primary" size="mini" plain v-if="data.level === 1"></u-tag>
				<u-tag text="严重" type="warning" size="mini" plain v-if="data.level === 2"></u-tag>
				<u-tag text="紧急" type="error" size="mini" plain v-if="data.level === 3"></u-tag>
			</view>
		</view>
		<view class="info-item u-flex u-flex-y-center">
			<view class="label">告警状态:</view>
			<view class="txt">
				<u-tag text="已恢复" type="success" size="mini" plain v-if="data.status === 1"></u-tag>
				<u-tag text="未恢复" type="error" size="mini" plain v-if="data.status === 0"></u-tag>
			</view>
		</view>
		<view class="info-item u-flex u-flex-y-center">
			<view class="label">发生时间:</view>
			<view class="txt">{{ $u.date(data.start*1000, 'yyyy-mm-dd hh:MM:ss') }}</view>
		</view>
		<view class="info-item u-flex u-flex-y-center">
			<view class="label">持续时间:</view>
			<view class="txt">{{ data.stay || '-' }}</view>
		</view>
		<view class="info-item u-flex u-flex-y-center">
			<view class="label">结束时间:</view>
			<view class="txt">{{ $u.date(data.end*1000, 'yyyy-mm-dd hh:MM:ss') }}</view>
		</view>
		<view style="background-color: #32353A;height: 1px;margin: 16px 0px;"> 
			
		</view>
		<!-- <u-line margin="30rpx 0" style="background-color:  #32353A;"></u-line> -->
		<view class="title">
			告警时间轴
		</view>

		<view class="timeline">
			<y-steps color='#fff' backgroundColor='#999' :infoList='data.timeline'></y-steps>
		</view>
	</view>
</template>

<script>
	import {genAlarms} from '@/mock/alarm'
	export default {
		data() {
			return {
				data: {},
			}
		},
		onLoad(opt) {
			let id = opt.id || 0
			if (id) {
				this.data = genAlarms().find(v => v.id == id)
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.view {
		.label {
			margin-right: 10px;
		}

		.desc {
			font-size: 18px;
			color: rgba(255,255,255,0.85);
		}

		.device {
			color: rgba(255,255,255,0.65);
			margin: 15px 0;
			font-size: 16px;
		}

		.info-item {
			color: rgba(255,255,255,0.45);
			font-size: 12px;
			line-height: 18px;
			margin-bottom: 4px;
		}

		.title {
			// margin-bottom: 8px;
			font-size: 14px;
			line-height: 14px;
			color: rgba(255,255,255,0.65);
		}
	}
</style>
